<template>
  <el-form style="display: flex;flex-direction: row; align-items: center; justify-content: flex-start"
           @submit.prevent>
    <slot name="searchHead" />
    <template v-for="(item) in search" :key="item.name">
      <template v-if="item.type === 'input'">
        <el-form-item :label="item.label" class="form-item-wrap" :style="{'margin': '0 16px 0 0'}">
          <el-input v-model="item.value"  :style="{'width': item.width}" :size="item.size"
                    :placeholder="item.placeholder" :clearable="item.clearable" />
        </el-form-item>
      </template>
      <template v-if="item.type === 'date-range'">
        <el-form-item :label="item.label" :style="{'margin': '0 16px 0 0','padding': 0,'width': item.width}">
          <el-date-picker :type="item.subType" :format="item.format" v-model="item.value"
                          :value-format="item.valFormat" :placeholder="item.placeholder"
                          :clearable="item.clearable" range-separator="至" :size="item.size"
                          :start-placeholder="item.placeholders[0]" :end-placeholder="item.placeholders[1]"/>
        </el-form-item>
      </template>
      <template v-if="item.type === 'select'">
        <el-form-item :label="item.label"
        :style="{'margin': '0 16px 0 0','padding': 0,'width': item.width,'min-width':item.minWidth}">
          <el-select
              v-model="item.value"
              :multiple="item.multiple"
              :placeholder="item.placeholder"
              :fit-input-width="true"
              :style="{'min-width':item.minWidth}"
              :chang="item.onChanged ? item.onChanged(item.value) : () => {}">
            <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            />
          </el-select>
        </el-form-item>
      </template>
    </template>

    <slot name="searchTail" />

    <template v-for="(item) in actions" :key="item.name">
      <el-button :size="item.size" :type="item.type" :icon="item.icon"
                 @click="() => item.action ? item.action() : {}" style="margin-right: 8px;">
        {{ item.label }}
      </el-button>
    </template>
    <slot name="searchLast" />
  </el-form>
</template>

<script setup lang="ts">

/**
 * 搜索的数据结构如下：
 * const searchItems = [
 *   {
 *     type: 'select',
 *     name: 'state',
 *     label: '状态',
 *     size: 'default',
 *     placeholder: '',
 *     clearable: true,
 *     defValue: '',
 *     width: '130px',
 *     options: [
 *       {
 *         label: '启用',
 *         value: 1,
 *       },
 *       {
 *         label: '禁用',
 *         value: 2,
 *       }
 *     ]
 *   },
 *   {
 *     type: 'input',
 *     name: 'name',
 *     label: '客户名称',
 *     size: 'default',
 *     placeholder: '请输入客户名称',
 *     clearable: true,
 *     defValue: '',
 *     width: '20%',
 *   },
 *   {
 *     type: 'date-range',
 *     subType: 'datetimerange',
 *     name: 'applyDate',
 *     label: '创建时间',
 *     size: 'default',
 *     placeholder: '请选择',
 *     placeholders: [
 *       '开始时间', '结束时间'
 *     ],
 *     clearable: true,
 *     format: 'YYYY/MM/DD HH:mm:ss',
 *     valFormat: 'YYYY-MM-DD HH:mm:ss',
 *     defValue: ['2016-10-05 00:00:00', '2016-10-06 00:00:00']
 *   }
 * ]
 */

import {onMounted, toRaw} from "vue";

const props = defineProps<{
  search?: any,
  actions?: any,
  onSelectChanged?: any,
}>();

const buildSearchParams = (searchData: SearchItem[] | undefined) => {
  const params: Record<string, any> = {};
  if (searchData) {
    searchData.forEach(item => {
      if (item.value != undefined) {
        params[item.name] = toRaw(item.value);
      }
    })
  }
  return params;
}

const getSearchParams = () => {
  return buildSearchParams(props.search);
}

const resetParams = () => {
  if (props.search) {
    props.search.forEach(item => {
      item.value = item.defValue;
    })
  }
}

onMounted(() => {
  resetParams();
})

defineExpose({
      resetParams,
      getSearchParams,
    }
)

</script>

<style scoped>
.form-item-wrap {
  color: #000;
  margin: 0 8px 0 0;
}
</style>
